<template>
  <div>
    <div class="title">输入框输入5个字节后自动换行</div>
    <el-input
      type="textarea"
      v-model="value"
      :show-word-limit="true"
      @input="
        (val, rowNum) => {
          handleTextarea(val, 5);
        }
      "
      placeholder="请输入xxx"
    ></el-input>

  </div>
</template>
<script>
export default {
  data() {
    return {
      value: "",
      white_array: "",
    };
  },
  watch: {
  },
  methods: {
    /**
     * @description    校验多行文本验证
     * @param val      输入值
     * @param rowNum   每行字符个数
     */
    handleTextarea(val, rowNum) {
      //正则匹配每行字数
      let reg = new RegExp("(.{" + rowNum + "})", "g");
      console.log("val", val);
      console.log(
        'val.replace(/[\r\n]/g, "")',
        val.replace(/[\r\n]/g, "")
      );
      //先除回车换行符的字符串，不去除影响字符个数计算
      let result = val.replace(/[\r\n]/g, "").replace(reg, "$1\n");
      this.value = result;
    },
  },
};
</script>
<style>
.el-textarea__inner {
  height: 200px;
  width: 400px;
}
.title {
  margin: 15px 0;
}
</style>
